<template>
	<view class="status">
		<!-- 订单状态 -->
		<!-- 已取消 -->
		<view class="order_status_box" v-if="info.status=='-1'">
			<view class="status_text">
				已取消
				<image class="right_icon" :src="$img_path('/course/icon/right_icon.png')" mode=""></image>
			</view>
			<view class="status_remark_box">
				<text class="status_remark_text">
					你已取消订单：
				</text>
				<text class="status_remark">
					取消原因/超时未支付
				</text>
			</view>
		</view>
		<!-- 待支付 -->
		<view class="order_status_box" v-if="info.status=='0'">
			<view class="status_text">
				待支付
				<image class="right_icon" :src="$img_path('/course/icon/right_icon.png')" mode=""></image>
			</view>
			<view class="status_remark_box">
				<text class="status_remark_text">
					支付剩余时间：{{(
					$dayjs.duration(timeoutStr,'s').hours()>9 ?$dayjs.duration(timeoutStr,'s').hours():'0'+$dayjs.duration(timeoutStr,'s').hours())
					+':'+
					($dayjs.duration(timeoutStr,'s').minutes()>9 ?$dayjs.duration(timeoutStr,'s').minutes():'0'+$dayjs.duration(timeoutStr,'s').minutes())
					+':'+
					($dayjs.duration(timeoutStr,'s').seconds()>9 ?$dayjs.duration(timeoutStr,'s').seconds():'0'+$dayjs.duration(timeoutStr,'s').seconds())
					}}
				</text>
			</view>
		</view>
		<!-- 待接单 -->
		<view class="order_status_box" v-if="info.status=='1'">
			<view class="status_text">
				待接单
				<image class="right_icon" :src="$img_path('/course/icon/right_icon.png')" mode=""></image>
			</view>
			<view class="status_remark_box">
				<text class="status_remark_text">
					请您耐心等待，我们尽快催促师傅接单
				</text>
			</view>
		</view>
		<!-- 待服务 -->
		<view class="order_status_box" v-if="(info.status=='2'||info.status=='3'||info.status=='4')">
			<view class="status_text">
				待服务
				<image class="right_icon" :src="$img_path('/course/icon/right_icon.png')" mode=""></image>
			</view>
			<view class="status_remark_box">
				<text class="status_remark_text">
					{{info.status=='4'?'师傅已到达，开始为您服务':'服务人员已接单，会尽快与您电话联系确认订单'}}
				</text>
			</view>
		</view>
		<!-- 服务中 -->
		<view class="order_status_box" v-if="info.status=='5'">
			<view class="status_text">
				服务中
				<image class="right_icon" :src="$img_path('/course/icon/right_icon.png')" mode=""></image>
			</view>
			<view class="status_remark_box">
				<text class="status_remark_text">
					服务人员正在为您服务
				</text>
			</view>
		</view>
		<!-- 待评价 -->
		<view class="order_status_box" v-if="info.status=='6'">
			<view class="status_text">
				待评价
				<image class="right_icon" :src="$img_path('/course/icon/right_icon.png')" mode=""></image>
			</view>
			<view class="status_remark_box">
				<text class="status_remark_text">
					订单已成功，请您对本次服务进行评价
				</text>
			</view>
		</view>
		<!-- 已完成 -->
		<view class="order_status_box" v-if="info.status=='7'">
			<view class="status_text">
				已完成
				<image class="right_icon" :src="$img_path('/course/icon/right_icon.png')" mode=""></image>
			</view>
			<view class="status_remark_box">
				<text class="status_remark_text">
					感谢您对本次服务进行评价
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			info:{
				type:Object,
				default:{}
			}
		},
		computed:{
			timeOut(){
				let setTime = setInterval(()=>{
					if(this.info.sy_time>0){
						this.info.sy_time--
						this.timeoutStr = this.info.sy_time
					}else{
						this.timeoutStr = 0
					}
				},1000)
			}
		},
		mounted() {
			// console.log(this.info,'sy--')
		},
		data(){
			return {
				timeoutStr:0
			}
		}
	}
</script>

<style lang="scss">
	@import url('../../../css/orderDetail.scss');
</style>